<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
      </el-form-item>

      <!-- 讲师头像：TODO -->
      <!-- 讲师头像：TODO -->
      <el-form-item label="讲师头像">

          <!-- 头衔缩略图 -->
          <pan-thumb :image="teacher.avatar"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
          </el-button>

          <!--
      v-show：是否显示上传组件
      :key：类似于id，如果一个页面多个图片上传控件，可以做区分
      :url：后台上传的url地址
      @close：关闭上传组件
      @crop-upload-success：上传成功后的回调 -->
          <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/oss/file/upload'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>

      </el-form-item> 


      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import teacher from "@/api/edu/teacher"
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'


const defaultFrom = {
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
avatar: "https://edu-wenqinzheng.oss-cn-hangzhou.aliyuncs.com/avatar/2020/05/28/a0588d21-f0e8-4824-a13b-c93d71890a28.jpg",

}

export default {
  // 声明一下插件
  components: { ImageCropper, PanThumb },
  data() {
    return {
      teacher: defaultFrom,
      saveBtnDisabled: false, // 保存按钮是否禁用,
      BASE_API: process.env.BASE_API, // 接口API地址
      imagecropperShow: false, // 是否显示上传组件
      imagecropperKey: 0, // 上传组件id

    }
  },
  watch:{
    $route(to, from) {
      // 当我们的监听路由方法
      // 判断路由的参数是否存在
      // 如果不存在
      // 说明新增
      // 如果存在
      // 说明是修改过来的
      this.init()
    }
  },

  created(){ // 在加载时候执行这个方法，可以调用id查询的方法
    // 执行方法，获取我们的参数
    this.init()
    
  },

  methods: {

    init(){
      if(this.$route.params && this.$route.params.id){ // 当加载页面，获取参数的值
        this.selectById(this.$route.params.id)
    }else{
      this.teacher = {...defaultFrom}
      // 深clone
      // 浅clone
      }
    },

    //1 怎么判断是新增还是修改
    //2 根据teacherId来判断

    saveOrUpdate() {

      // 当点击按钮的时候，让保存按钮为true 不启用
      this.saveBtnDisabled = true

      if(this.teacher.id){
        this.updateById()
      }else{
        this.save()
      }

    },
    save(){
      teacher.save(this.teacher)
        .then(response=>{
          return this.$message({
            type: 'success',
            message: '保存成功!'
        })
        })
        .then(response=>{
          this.$router.push({path:"/teacher/list"})
        })
        .cacth(response=>{
          return this.$message({
            type: 'error',
            message: '保存失败'
        })
        })
    },
    updateById(){
        teacher.updateById(this.teacher)
          .then(response=>{
            //修改提示
            this.$message({
              type:'success',
              message:"修改成功"
            })
          })
          .then(response=>{
            this.$router.push({path:"/teacher/list"})
          })
          .catch(response=>{
             this.$message({
              type:'error',
              message:response.data.message
            })
          })  
    },
    selectById(id){
        teacher.selectById(id)
          .then(response=>{
            this.teacher = response.data.teacher
          }).cacth(response=>{
            this.$message({
              type:'error',
              message:"获取失败"
            })
          })
    },
    close(){
      // 1 关闭了这个上传图片框
      this.imagecropperShow= false, // 是否显示上传组件
      
      // 2 给框Id变化一次
      this.imagecropperKey = this.imagecropperKey + 1// 上传组件id
    },
    // 保存图片成功
    cropSuccess(data){
        this.teacher.avatar = data.url
         // 1 关闭了这个上传图片框
      this.imagecropperShow= false, // 是否显示上传组件
      alert("上传成功")
      // 2 给框Id变化一次
      this.imagecropperKey = this.imagecropperKey + 1// 上传组件id
    },


  }
}
</script>

